<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/overview' }">
      <h3>首页</h3>
    </el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/web' }">
      <h3>页面UI元素添加</h3>
    </el-breadcrumb-item>

  </el-breadcrumb>

  <!-- 添加一个卡片  -->
  <el-card class="box-card">

    <el-form status-icon label-width="120px" class="demo-ruleForm" :model="ruleFormmodel" ref="ruleFormRef"
      :rules="webautorules">


      <el-form-item label="元素类型选择1:" prop="type1">
        <el-select v-model="ruleFormmodel.type1" placeholder="类型选择" style="width:500px">
          <el-option label="ID" value="By.ID" />
          <el-option label="XPATH" value="By.XPATH" />
          <el-option label="NAME" value="By.NAME" />
          <el-option label="CSS" value="By.CSS" />

        </el-select>
      </el-form-item>


      <el-form-item label="元素定位路径1:" prop="elementpath1">
        <el-input style="width:500px" v-model="ruleFormmodel.elementpath1" />
      </el-form-item>


      <el-form-item label="元素类型选择2:" prop="type2">
        <el-select v-model="ruleFormmodel.type2" placeholder="类型选择" style="width:500px">
          <el-option label="ID" value="By.ID" />
          <el-option label="XPATH" value="By.XPATH" />
          <el-option label="NAME" value="By.NAME" />
          <el-option label="CSS" value="By.CSS" />

        </el-select>
      </el-form-item>


      <el-form-item label="元素定位路径2:" prop="elementpath2">
        <el-input style="width:500px" v-model="ruleFormmodel.elementpath2" />
      </el-form-item>



      <el-form-item label="元素类型选择3:" prop="type3">
        <el-select v-model="ruleFormmodel.type3" placeholder="类型选择" style="width:500px">
          <el-option label="ID" value="By.ID" />
          <el-option label="XPATH" value="By.XPATH" />
          <el-option label="NAME" value="By.NAME" />
          <el-option label="CSS" value="By.CSS" />

        </el-select>
      </el-form-item>


      <el-form-item label="元素定位路径3:" prop="elementpath3">
        <el-input style="width:500px" v-model="ruleFormmodel.elementpath3" />
      </el-form-item>


      <el-form-item label="元素类型选择4:" prop="type4">
        <el-select v-model="ruleFormmodel.type4" placeholder="类型选择" style="width:500px">
          <el-option label="ID" value="By.ID" />
          <el-option label="XPATH" value="By.XPATH" />
          <el-option label="NAME" value="By.NAME" />
          <el-option label="CSS" value="By.CSS" />

        </el-select>
      </el-form-item>


      <el-form-item label="元素定位路径4:" prop="elementpath4">
        <el-input style="width:500px" v-model="ruleFormmodel.elementpath4" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button type="primary" @click="onSubmit">追加</el-button>
        <el-button type="success" @click="onreset">重置</el-button>
      </el-form-item>

    </el-form>

  </el-card>



</template>

<script setup>
//ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性
//   1、scope.$index 代表拿到每一行的index
// 2、scope.row代表拿到每一行的数据
//    响应式数据  ref
// const obj = reactive({ name: "name" });
import { ref, reactive } from 'vue'               //处理响应式数据 ,需要导入
import { findlerelement } from '../../../api/index'
import { ArrowRight } from '@element-plus/icons-vue'    //图标显示引用

// 添加用户 传参 
const ruleFormmodel = reactive({
  type1: '',
  elementpath1: '',
  type2: '',
  elementpath2: '',
  type3: '',
  elementpath3: '',
  type4: '',
  elementpath4: ''


})

const webautorules = reactive({
  type1: [
    {
      required: true,            //是否是必须的
      message: 'Please choose one',
      trigger: 'blur',       //离开这个焦点的时间触发
    }
  ],
  elementpath1: [
    {
      required: true,            //是否是必须的
      message: 'Please input',
      trigger: 'blur',       //离开这个焦点的时间触发
    }
  ]

})

// 触发请求后, 数据
const ruleFormRef = ref(null)

// 提交
function onSubmit() {

  console.log("onSubmit")


  ruleFormRef.value.validate(isValid => {              //只有在校验正确的情况下,才触发请求 
    if (isValid) {

      //添加元素,向后台进行请求 
      findlerelement(ruleFormmodel).then(res => {
        console.log(res)

      })
    }
    else {
      // ElMessage({
      //     message: '请输入正确的信息再提交',
      //     type: 'warning',
      // })
    }
    // 清空form中的内容 
    onreset()

  }
  )
}


// 重置

function onreset() {

  console.log(ruleFormRef)
  ruleFormRef.value.resetFields()

}




</script > 

<style lang="less" scoped>

.box-card {
    height: 100%;
}
</style>